<template>
    <div class="body">
        <div class="input_box">
            <span class="play_song">选择歌曲</span> 
            <input type="file" value="加载" id="loadFile" @change="loadFile()">
        </div>
        <div class="stage"></div>
        <audio id="audio_id" controls autoplay loop></audio>
        <ul id="fileList">
        </ul>
    </div>
</template>

<script>
export default {
    methods: {
        
        loadFile: function () {
            //console.log(files);
            var files=document.getElementById("loadFile").files;
            let file = files[0];

            //避免数组里的歌曲重复上传，歌曲名一样便不放入数组
            for (let i = 0; i < fileList.length; i++) {
                if (file.name == fileList[i].name) {
                    return
                }
            }

            //将歌曲放入数组
            fileList.push({
                num: fileList.length + 1,
                name: file.name
            })

            //生成li标签，点击时
            let liEl = document.createElement('li');
            liEl.addEventListener('click', function () {
                var url = URL.createObjectURL(file);
                document.getElementById("audio_id").src = url;
                //liEl.selected;
            })

            //生成span标签存放这个歌曲的编号
            let numSpanEl = document.createElement('span');
            numSpanEl.classList.add('num');
            numSpanEl.innerHTML = fileList.length;
            liEl.append(numSpanEl);

            //生成span标签存放这个歌曲的名字
            let nameSpanEl = document.createElement('span');
            nameSpanEl.classList.add('song');
            nameSpanEl.innerHTML = file.name;
            liEl.append(nameSpanEl);

            //将生成的li标签放入文件的数组
            let fileListEl = document.getElementById('fileList');
            fileListEl.append(liEl)
        }
    },
    watch:{

    }
}
//文件加载

//文件的列表
var fileList = [];
//载入文件


//音乐播放

</script>

<style>
.body {
    background: url(image/back.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 14px;
    font-family: "微软雅黑";
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.input_box {
    width: 150px;
    background: #31c27c;
    border: 1px solid #31c27c;
    margin: 20px auto;
    color: #fff;
    border-radius: 2px;
    line-height: 30px;
    text-align: center;
    position: relative;
}

.play_song {
    width: 152px;
    line-height: 30px;
    position: absolute;
    left: 50%;
    margin-left: -76px;
}

#loadFile {
    width: 150px;
    opacity: 0;
}

#fileList {
    background: #eee;
    width: 300px;
    margin: 0 auto;
    list-style: none;
    max-height: 170px;
    overflow-y: auto;
    padding: 0;
}

#fileList li {
    line-height: 24px;
    padding: 5px 0px;
    overflow: hidden;
}

.num {
    color: #999;
    float: left;
    width: 36px;
    text-align: center;
}

.song {
    color: #000;
    float: left;
}

.selected {
    color: #31c27c;
}

#audio_id {
    display: none;
}
</style>